import { ref, watch } from 'vue';
// import { using } from './common.js';

export const kbdModalProps = ref({ visible: false });
// watch(() => kbdModalProps.value.visible, newVal => newVal && (using.value = 'none'));

export const kbdTable = [
  { key: ['Esc'], fn: '移动工具' },
  { key: ['I'], fn: '批注' },
  { key: ['G'], fn: '通过' },
  { key: ['H'], fn: '驳回' },
  { key: ['Space'], fn: '拖拽/取消拖拽 画布' },
  { key: ['W'], fn: '画框' },
  { key: ['Ctrl', 'C'], fn: '复制选中的框' },
  { key: ['Ctrl', 'V'], fn: '粘贴选中的框' },
  { key: ['Ctrl', 'H'], fn: '显示/隐藏 所有框' },
  { key: ['Delete'], fn: '删除选中的框' },
  { key: ['←↑↓→'], fn: '移动框', when: '选中工作区的一个框' },
  { key: ['A'], fn: '上一题' },
  { key: ['D'], fn: '下一题' },
  { key: ['↑'], fn: '上个框', when: '未选/选中一个标注列表项' },
  { key: ['↓'], fn: '下个框', when: '未选/选中一个标注列表项' },
  { key: ['Ctrl', '+'], fn: '比例变大' },
  { key: ['Ctrl', '-'], fn: '比例变小' },
  { key: ['Ctrl', '1'], fn: '实际大小' },
  { key: ['Ctrl', '2'], fn: '适应页面' },
];

export const KbdHTML = xs => xs.map(x => `<kbd>${x}</kbd>`).join(' + ');
